<template>
    <div>
		<!-- //hello-mui/examples/tab-top-webview-main.html -->
	
			<div id="slider" class="mui-slider ">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<span :class= "['mui-control-item',  item.id === 0?'mui-active':'']" 
						 v-for="item in picList" :key="item.id" @click="getPhotoByCategory(item.id)">
							{{item.title}}
						</span>
			
					</div>
				</div>

			</div>

			
			<ul class="lazyul">
  				<router-link tag="li" v-for="item in photolist" :key="item.id" :to="'/home/photoinfo/'+item.id">
   					 <img v-lazy="item.img_url">
					 <div class="info">
					 	 <div class="info-title">{{ item.title}}</div>
						 <div class="info-content" v-html="item.content"></div>
					 
					 </div>
					
						
  				</router-link>
			</ul>
			


	</div>
    
    
    
</template>

<script>
//mui导入
import mui from "../../lib/mui/js/mui.js"






export default {
	data(){
		return{
			picList :[],
			photolist:[],
		};
	},
	created(){
		this.getimgcat();
		this.getPhotoByCategory(0);
	},
	methods: {
		async getimgcat(){
			const{data} = await this.$http.get('api/getimgcategory')

			if(data.status === 0)  {
				data.message.unshift({title:"全部", id:0})
				this.picList = data.message
			}
			// )

			

		},

		async getPhotoByCategory(id){
			const{data} = await this.$http.get('api/getimages/'+ id)

			if(data.status === 0) return (this.photolist = data.message) 

			
		}
		
	},
	mounted(){
		//控件初始化
		mui('.mui-scroll-wrapper').scroll({
		deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
		});


	},
	

    
}
</script>

<style lang="scss" scoped>
	.mui-slider{
		touch-action: pan-x;
	}
    
	.lazyul{
		background-color: #ccc;
		margin:0;
		padding:0;
		li{
		
		background-color: #ccc;
		text-align: center;
		box-shadow: #000;
		position: relative;
		&+ li {
			margin-top: 10px;
		}

			img{
		vertical-align: middle;
		
  		width: 100%;
 		height: 300px;
		margin: auto;
			}
        }
	}


   .info{
	   position: absolute;
	   bottom: 0;
	   color:#ccc;
	   background-color: rgba(0,0,0,0.5);
	   max-height: 86px;
	   overflow: hidden;
	   .info-title{
		   font-size:14px;
	   }
	   .info-content{
		   font-size:13px;
		   text-align: left;
		   text-indent: 2em;
	   }

   }

	
		

	
</style>